<template>
  <view
    class="px-[30rpx] py-[30rpx] box-border rounded-[20rpx] bg-white work-list mb-[30rpx]"
  >
    <text class="title text-[36rpx] font-bold text-[#1B1B1B]">工作台</text>
    <view class="my-list flex flex-wrap mt-[40rpx]">
      <view
        class="list-content w-[25%] mb-[34rpx]"
        v-for="item in list"
        :key="item.name"
        @click="$emit('item-click', item)"
      >
        <view class="list-content-box flex justify-center">
          <image
            mode="aspectFill"
            class="list-content-img w-[140rpx] h-[140rpx]"
            :src="item.url"
          />
        </view>
        <view class="list-content-name text-center">{{ item.name }}</view>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
const BASEURL = "/static/images";

defineProps(["list"]); // 接收列表数据
defineEmits(["item-click"]); // 声明点击事件
const linkTo = (url: string) => {
  uni.navigateTo({ url });
};
</script>
<style scoped lang="scss">
.work-list {
  min-height: 60vh;
  box-shadow: 0px 2px 32px rgba(94, 125, 50, 0.1);
}
.my-list {
  .list-content {
    .list-content-name {
      margin-top: 12rpx;
      font-size: 24rpx;
    }
  }
}
</style>
